<template>
    <div>
        <a-button type="primary" @click="showModal">Open Modal with async logic</a-button>
        <a-modal title="Title" v-model:visible="visible" :confirm-loading="confirmLoading" @ok="handleOk">
            <p>{{ modalText }}</p>
        </a-modal>
    </div>
</template>
<script lang="ts" setup>
import { ref, defineComponent } from 'vue';

const modalText = ref<string>('Content of the modal');
const visible = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);

const showModal = () => {
    visible.value = true;
};

const handleOk = () => {
    modalText.value = 'The modal will be closed after two seconds';
    confirmLoading.value = true;
    setTimeout(() => {
        visible.value = false;
        confirmLoading.value = false;
    }, 2000);
}
</script>